 const a=100;
export default a;

var $ ={
	one(slt:string):HTMLElement{
		return document.querySelector(slt) as HTMLElement;
	},
	
	all(slt:string):NodeListOf<HTMLElement>{
		return document.querySelectorAll(slt);
	},
}

class Fangdajing{

  drag:HTMLElement;
  previewBox:HTMLElement;//预览盒子
  pic:HTMLImageElement;//图片
  previewPic:HTMLImageElement;//预览图片
  lastSelectSmallLi:HTMLElement|null=null;//上次选择的小图li


  picListBox:HTMLElement;
  
  //放大比例(drag:preview == img:PreviewImg),注意：img外有边框时取边框尺寸
  readonly bili:{x:number, y:number};

  static me:Fangdajing|null=null;

  static ins(){
    if(!Fangdajing.me){
      Fangdajing.me = new Fangdajing;
    }

    return Fangdajing.me;
  }


  constructor(){
    this.drag = $.one(".drag");
    this.previewBox = $.one(".previewBox");
    this.pic = $.one(".pic") as HTMLImageElement;
    this.previewPic = $.one(".previewPic") as HTMLImageElement;
    this.picListBox = $.one(".picListBox");

    // 计算比例
    this.bili = {
      x:this.previewBox.offsetWidth / this.drag.offsetWidth,
      y:this.previewBox.offsetHeight / this.drag.offsetHeight,
    };
    console.log(this.bili);

  }

  public exec(){
    this.init();
    this.move();
    this.chg();
  }

  private init(){

    // 选择第一个图片
    let firstPic = this.picListBox.querySelector("img") as HTMLImageElement;
    this.select(firstPic);

    // 根据比例重置预览图片大小
    let width = this.pic.offsetWidth * this.bili.x;
    let height = this.pic.offsetHeight * this.bili.y;
    // console.log(width, height);
    this.previewPic.style.cssText = `width:${width}px; height:${height}px;`;
  }

  // 预览框移动
  private previewMove(x:number, y:number){
    // console.log(`{left:${x*this.bili}px; top:${y*this.bili}px;}`);
    this.previewPic.style.left = -x*this.bili.x + "px";
    this.previewPic.style.top = -y*this.bili.y + "px";
  }

  // 
  private chg(){

    this.picListBox.onclick = (event:MouseEvent)=>{
      let img = event.target as HTMLImageElement;
      if(img.nodeName!="IMG") return;
      this.select(img);
    }
  }

  // 选择图片
  private select(picSelect:HTMLImageElement){

      // 选中样式
      if(this.lastSelectSmallLi){
        this.lastSelectSmallLi.classList.remove('active');
      }
      let li = picSelect.parentNode as HTMLLIElement;
      li.classList.add("active");
      this.lastSelectSmallLi= li;

      // 切换 主图和预览图
      let src = picSelect.getAttribute("src") as string;
      this.pic.src = src;
      this.previewPic.src=src;

  }


  // 移动：drag带动preview移动
  private move(){
    let imgBox = $.one(".picBox");

 
    // 移动
    imgBox.onmousemove=(event:MouseEvent)=>{

      // 1.取得鼠标位置
      let x= event.pageX - (imgBox.parentElement as HTMLElement).offsetLeft - this.drag.offsetWidth/2,
          y= event.pageY - (imgBox.parentElement as HTMLElement).offsetTop - this.drag.offsetHeight/2;

      // 2. 判断边界
      if(x<0) x=0;
      if(x>imgBox.offsetWidth-this.drag.offsetWidth)
        x=imgBox.offsetWidth-this.drag.offsetWidth;

      if(y<0) y=0;
      if(y>imgBox.offsetHeight-this.drag.offsetHeight)
        y=imgBox.offsetHeight-this.drag.offsetHeight;

      // 3. 设定选取块的位置
      this.drag.style.left =  x+"px";
      this.drag.style.top =  y+"px";

      // 4. 预览移动显示
      this.previewMove(x, y);

    }

    // 鼠标进入
    imgBox.onmouseenter =()=>{
      this.drag.style.visibility = "visible";
      this.previewBox.style.visibility = "visible";
    }

    // 鼠标移出
    imgBox.onmouseleave =()=>{
      this.drag.style.visibility = "hidden";
      this.previewBox.style.visibility = "hidden";
    }

  }



}


Fangdajing.ins().exec();